<template>
  <div>
    <div id="top"></div>
    <div id="body">
      <router-view />
    </div>
    <div id="footer">
      <div
        class="footer-item"
        :class="{ green: choiceLabel == 1 }"
        @click="change(1)"
      >
        <van-icon name="wap-home-o" size="30" />
        <br />首页 
      </div>

      <div
        class="footer-item"
        :class="{ green: choiceLabel == 2 }"
        @click="change(2)"
      >
        <van-icon name="envelop-o" :badge="newMsgNum" size="30" />
        <br />消息
      </div>
      <div
        class="footer-item"
        :class="{ green: choiceLabel == 3 }"
        @click="change(3)"
      >
        <van-icon name="user-o" size="30" />
        <br />我的
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "IndexPage",
  data() {
    return {
      choiceLabel: 1,
      newMsgNum: "",
      routes:['/', '/home', '/msg', '/user']
    };
  },
  methods: {
    change(index) {
    this.getNewMsgNum();
      if(index == 2) {
        this.newMsgNum = ''
      }
      if (this.choiceLabel == index) {
        this.back2top()
        return;
      }
      this.choiceLabel = index;
      this.$router.replace(this.routes[index])
     
    },
    getNewMsgNum() {
      this.postRequest("/msg/getNewMsgNum").then((res) => {
        if (res.data.data !== 0) {
          this.newMsgNum = res.data.data;
        }
      });
    },
    back2top(){
      window.scrollTo(0,0)
    }
  },
  created() {
    switch (this.$route.path) {
      case "/msg":
        this.choiceLabel = 2;
        break;
      case "/user":
        this.choiceLabel = 3;
        break;
    }
    this.getNewMsgNum();
  },
};
</script>
<style scoped>
#footer {
  font-size: 12px;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  padding-bottom: 1.5em;
  padding-top: 1em;
  width: 100%;
}
#footer img {
  width: 20%;
}
.footer-item {
  box-sizing: border-box;
  width: 33.33%;
  text-align: center;
  float: left;
}
.green {
  color: #3fc1c9;
}
</style>
